import React, { FC, useState } from 'react';
import styles from './index.less';
import AlarmTable from './components/AlarmTable';
import { Row, Col } from 'antd';
export const modelName = 'realTimeAlarm';
import Line from './components/Line';
import Donut from './components/Donut';
import { usePersistFn } from 'ahooks';
import useHoxModel from '../../useHoxModel';

const RealTimeAlarm: FC<{}> = ({}) => {
  const calcTopHeight = usePersistFn(() => {
    const restHeight = 200;
    let topHeight = (document.body.offsetHeight - restHeight) * 0.33;
    if (topHeight <= 282) {
      topHeight = 282;
    }
    if (topHeight >= 342) {
      topHeight = 342;
    }
    return topHeight;
  });
  const [height] = useState(calcTopHeight());
  const { getRunAlarm } = useHoxModel((model) => []);

  return (
    <div className={styles['realtime-alarm-wrap']}>
      <div className={styles['alarm-chart']} style={{ height: height + 'px' }}>
        <Row gutter={16} style={{ flex: 1 }}>
          <Col span={16}>
            <div className={styles['alarm-graph']}>
              <Line height={height} />
            </div>
          </Col>
          <Col span={8}>
            <div className={styles['alarm-pie']}>
              <Donut height={height} />
            </div>
          </Col>
        </Row>
      </div>
      <div className={styles['alarm-table']}>
        <AlarmTable getRunAlarm={getRunAlarm} />
      </div>
    </div>
  );
};
export default RealTimeAlarm;
